import {Avatar, Button, Card, Col, Descriptions, Image, List, Row, Tabs} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess, renderText} from "@/utils/utils";
import {MobileDemandManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";
import styles from '../../../../global.less';
import 'braft-editor/dist/index.css'
import {demandAudit} from "@/pages/custom/demand/list";
import ProTable, {ProColumns} from "@ant-design/pro-table";

const DemandDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [record, setRecord] = useState<any>(undefined)

  const queryRecordDetail = (sid: number) => {
    if (sid) {
      MobileDemandManager.detail(sid).then(({code, data}) => {
        if (isSuccess(code)) {
          setRecord(data)
        }
      })
    }
  }

  useEffect(() => queryRecordDetail(id), [id])

  const columns: ProColumns[] = [
    {
      title: '接单设计师',
      dataIndex: 'nickName',
      width: 100,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      width: 100,
    },
    {
      title: '设计师等级',
      dataIndex: 'customizeLevel',
      width: 100,
    },
    {
      title: '接单结果',
      dataIndex: 'recordStatus',
      valueEnum: SYS_ENUMS.WORKING_RECORD_STATUS,
      width: 100,
    },
    {
      title: '抢单时间',
      dataIndex: 'gmtCreate',
      valueType: 'dateTime',
      width: 130,
    },
  ];

  return (
    <PageContainer>
      <Card bordered={false}
            actions={record?.demandStatus === 'AUDITING' ? [<span></span>, <span></span>,
              <span style={{float: 'right', paddingRight: 17}}>
                <Button style={{marginRight: 17}}
                        onClick={() => demandAudit({
                          auditOperate: SYS_ENUMS.RESOURCE_AUDIT_STATE.REFUSE.value,
                          remark: '【详情快捷驳回】',
                        }, record, () => queryRecordDetail(id))}>驳回</Button>
                <Button type='primary'
                        onClick={() => demandAudit({
                          auditOperate: SYS_ENUMS.RESOURCE_AUDIT_STATE.PASS.value,
                          remark: '【详情快捷通过】',
                        }, record, () => queryRecordDetail(id))}>通过</Button>
              </span>] : []}>
        <Tabs destroyInactiveTabPane={true}>
          <Tabs.TabPane forceRender tab='需求概况信息' key="DEMAND_BASIC_INFO">
            <Descriptions title="基本信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="需求ID">{id}</Descriptions.Item>
              <Descriptions.Item label="需求标题">{record?.title}</Descriptions.Item>
              <Descriptions.Item label="发布人">{record?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item
                label="需求状态">{renderText(SYS_ENUMS.DEMAND_STATUS[record?.demandStatus]?.label)}</Descriptions.Item>
              <Descriptions.Item label="浏览人数">{record?.browseNum}</Descriptions.Item>
              <Descriptions.Item label="抢单人数">{record?.headFixed ? '是' : '否'}</Descriptions.Item>
              <Descriptions.Item label="预算金额"><span style={{color:'red'}}>{record?.budget}</span></Descriptions.Item>
              <Descriptions.Item label="预估页数">{record?.expectedPages}</Descriptions.Item>
              <Descriptions.Item label="接单设计师">{renderText(record?.acceptDesigner?.nickName)}</Descriptions.Item>
              <Descriptions.Item label="剩余天数">{record?.draftTime}</Descriptions.Item>
              <Descriptions.Item label="交付日期">{renderText(record?.finishTime)}</Descriptions.Item>
              <Descriptions.Item label="发布时间">{record?.gmtCreate}</Descriptions.Item>
              <Descriptions.Item label="需求描述">{record?.gmtCreate}</Descriptions.Item>
            </Descriptions>
            <Row gutter={16}>
              <Col lg={12} md={12} sm={24}>
                <ProTable<any, any>
                  rowKey="acceptDesignList"
                  search={false}
                  headerTitle='接单情况'
                  pagination={false}
                  dataSource={record?.acceptList??[]}
                  columns={columns}
                />
              </Col>
            </Row>
            <div className={styles.title}>需求进度</div>
            <List
              itemLayout="horizontal"
              dataSource={record?.recordList??[]}
              renderItem={({userDto, gmtCreate, remark}: any) => <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={userDto?.avatarUrl}/>}
                  title={remark}
                  description={`备注: ${remark ?? '暂无'}`}
                />
                <div>{`${gmtCreate} `}</div>
              </List.Item>}
            />
          </Tabs.TabPane>
          <Tabs.TabPane forceRender tab='设计详情' key="DEMAND_DESIGN_INFO">
            <Descriptions title="设计要求" style={{marginBottom: 32}}>
              <Descriptions.Item label="PPT类型">{id}</Descriptions.Item>
              <Descriptions.Item label="演示尺寸">{record?.title}</Descriptions.Item>
              <Descriptions.Item label="所属行业">{record?.industry}</Descriptions.Item>
              <Descriptions.Item label="使用场景">{record?.useScene}</Descriptions.Item>
              <Descriptions.Item label="风格要求">{record?.styleRequirement}</Descriptions.Item>
              <Descriptions.Item label="颜色意向">{record?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="动画需求">{record?.worksContentSize}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="其他信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="是否需要线下上门">{record?.offlineDropIn ? '是' : '否'}</Descriptions.Item>
              <Descriptions.Item label="资料完成度">{record?.title}</Descriptions.Item>
              <Descriptions.Item label="保密程度">{record?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="受众人数">{record?.offlineDropIn ? '是' : '否'}</Descriptions.Item>
              <Descriptions.Item label="播放设备">{record?.headFixed ? '是' : '否'}</Descriptions.Item>
              <Descriptions.Item label="演讲时间">{record?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="演示软件版本">{record?.worksContentSize}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="" style={{marginBottom: 32}} column={1}>
              <Descriptions.Item label="封面">
                {
                  record?.images && <Image src={record?.images?.url} title={record?.title}/>
                }
              </Descriptions.Item>
              <Descriptions.Item label="附件">{record?.file?.url}</Descriptions.Item>
            </Descriptions>
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default DemandDetail;
